<!--
 * @Author: Terry
 * @Date: 2022-10-25 17:40:24
 * @LastEditors: Terry
 * @LastEditTime: 2023-12-09 17:47:08
 * @Description: file content
 * @FilePath: \auxface_web\src\components\breadcrumb.vue
-->
<template>
  <el-card :body-style="{'padding':'0px 20px'}" class="p-0 m-b-15" v-if="levelList.length > 0">
    <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
      <transition-group name="breadcrumb" >
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"  class="cursor-default">
          <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" >
            {{ $t(item.meta.title) }}
          </span>
          <a v-else >{{ $t(item.meta.title) }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
   </el-card> 
</template>

<script>
export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route(route) {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      if(this.levelList.length == 1 ) this.levelList = [];
    },
  }
}
</script>

<style lang="scss" scoped>

.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  .cursor-default{
    cursor: default;
  }
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

</style>
